<template>
  <div>
    <!-- 搜索卡片区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>全部图文</span>
      </div>
      <div class="text item">
        <!-- el-form搜索表单区域 -->
        <el-form ref="searchFormRef" :model="searchForm" label-width="100px">
          <el-form-item label="文章状态：">
            <el-radio-group v-model="searchForm.status">
              <el-radio label>全部</el-radio>
              <el-radio label="0">草稿</el-radio>
              <el-radio label="1">待审核</el-radio>
              <el-radio label="2">审核通过</el-radio>
              <el-radio label="3">审核失败</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="频道列表：">
            <channel-com @slt="selectHandler"></channel-com>
          </el-form-item>

          <el-form-item label="时间选择：">
            <el-date-picker
              v-model="timetotime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 文章列表卡片区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>共找到{{tot}}条符合条件的内容</span>
      </div>
      <div class="text item">
        <el-table :data="articleList" style="width: 100%">
          <el-table-column label="图片">
            <!-- <el-image
              :src="stData.row.cover.images[0]"
              slot-scope="stData"
              alt="这是图片"
              width="150"
              height="100"
            ></el-image>-->
            <el-image
            :src="stData.row.cover.images[0]"
              slot-scope="stData"
              alt="这是图片"
              width="150"
              height="100">
              <div slot="error" class="image-slot">
                 <i class="el-icon-picture-outline">&nbsp;加载失败……</i>
              </div>
            </el-image>
          </el-table-column>

          <el-table-column prop="title" label="标题" width="300"></el-table-column>

          <el-table-column label="状态">
            <template slot-scope="stData">
              <el-tag v-if="stData.row.status===0">草稿</el-tag>
              <el-tag v-else-if="stData.row.status===1" type="warning">待审核</el-tag>
              <el-tag v-else-if="stData.row.status===2" type="success">审核通过</el-tag>
              <el-tag v-else-if="stData.row.status===3" type="info">审核失败</el-tag>
              <el-tag v-else type="danger">已删除</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="pubdate" label="发布时间"></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="stData">
              <el-button type="primary" size="mini" @click="$router.push(`/articleedit/${stData.row.id}`)">修改</el-button>
              <el-button type="danger" size="mini" @click="del(stData.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="text item">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="searchForm.per_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tot"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入channel.vue公共组件
import ChannelCom from '@/components/channel.vue'

export default {
  // 每个组件都起一个名字
  name: 'ArticleList',
  components: {
    // 注册独立的频道组件
    ChannelCom
  },

  // 监听器(data)
  watch: {
    // status 变化的回调处理
    'searchForm.status': function (newv, oldv) {
      // 更新相关文章即可
      this.getArticleList()
    },
    timetotime (newval) {
      if (newval) {
        this.searchForm.begin_pubdate = newval[0]
        this.searchForm.end_pubdate = newval[1]
      } else {
        this.searchForm.begin_pubdate = ''
        this.searchForm.end_pubdate = ''
      }
      // 根据新的begin_pubdate和end_pubdate筛选文章
      this.getArticleList()
    },
    // 对searchForm的各个成员多深度监听，统一筛选获得文章
    searchForm: {
      handler: function (newv, oldv) {
        this.getArticleList()
      },
      deep: true
    }
  },
  data () {
    return {
      timetotime: '', // 临时成员，接受范围时间
      articleList: [], // 文章列表
      searchForm: {
        status: '', // 文章状态 0:草稿 .....不传为全部
        channel_id: '', // 频道信息
        begin_pubdate: '', // 开始时间
        end_pubdate: '', // 结束时间
        page: 1, // 默认获取第一页数据
        per_page: 10 // 每页获取十条数据
      },
      tot: 0 // 文章总记录条数
    }
  },
  created () {
    // 获得文章列表
    this.getArticleList()
  },
  methods: {
    // 给channel-com的slt事件声明事件驱动方法
    // val是子组件channel.vue给传递过来的选中频道信息
    selectHandler (val) {
      // console.log(val)
      // 把子组件传递过来的频道信息赋予给addFrom.channel_id
      this.searchForm.channel_id = val
    },
    // 删除文章数据
    del (id) {
      this.$confirm('确认要删除该数据么?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // axios.get()查询/post()添加/put修改/delete()删除
          let pro = this.$http.delete(`/articles/${id}`)
          pro
            .then(resule => {
              // console.log(resule)
              this.getArticleList()
            })
            .catch(err => {
              return this.$message.error('删除文章失败' + err)
            })
        })
        .catch(() => {})
    },
    // 分页相关
    // 每页显示条数变化的回调事件处理
    handleSizeChange (val) {
      this.searchForm.per_page = val
      this.getArticleList()
    },
    // 当前页码变化的回调事件处理
    handleCurrentChange (val) {
      // val 是当前变化后的页码
      // console.log(val)
      this.searchForm.page = val // 更新后每页条数
      this.getArticleList()
    },

    // 获得文章列表信息
    getArticleList () {
      // 把searchForm内部为空的成员都过滤掉
      let searchData = {} // 筛选后的条件数据
      for (var i in this.searchForm) {
        // i代表对象的成员属性名称
        if (this.searchForm[i]) {
          // 成员值非空
          searchData[i] = this.searchForm[i]
        }
      }
      let pro = this.$http.get('/articles', { params: searchData })
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // console.log(result)
            this.articleList = result.data.data.results
            this.tot = result.data.data.total_count
          }
        })
        .catch(err => {
          return this.$message.error('获得文章错误' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 15px;
  text-align: center;
}

.el-image /deep/ .image-slot{
  width: 150px;
  height: 100px;
  background-color: #f0f0f0;
  margin-top: 10px;
  color: #999;
}
</style>
